<template>
  <div class="bg-gray-1 pd16 flex-column gap10">
    <div class="flex-column gap10">
      <div class="flex-row-center-left">
        <div class="dot mgr10"></div>
        <span>{{ props.maxCount?.cycle }}</span>
        <span class="grey-text mgl20">增长量最大</span>
      </div>
      <div class="flex-row-center-left">
        <div class="dot mgr10"></div>
        <span>{{ props.minCount?.cycle }}</span>
        <span class="grey-text mgl20">增长量最小</span>
      </div>
    </div>

    <div class="flex-column gap10">
      <div class="flex-row-center-left">
        <div class="dot mgr10"></div>
        <span>{{ props.maxMom?.cycle }}</span>
        <span class="grey-text mgl20">环比增长量最大</span>
      </div>
      <div class="flex-row-center-left">
        <div class="dot mgr10"></div>
        <span>{{ props.minMom?.cycle }}</span>
        <span class="grey-text mgl20">环比增长量最小</span>
      </div>
    </div>

    <div class="flex-column gap10">
      <div class="flex-row-center-left">
        <div class="dot mgr10"></div>
        <span>{{ props.maxYoy?.cycle }}</span>
        <span class="grey-text mgl20">同比增长量最大</span>
      </div>
      <div class="flex-row-center-left">
        <div class="dot mgr10"></div>
        <span>{{ props.minYoy?.cycle }}</span>
        <span class="grey-text mgl20">同比增长量最小</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { AgentCountBItem } from '../config'

  interface IProps {
    maxCount?: AgentCountBItem
    minCount?: AgentCountBItem
    maxMom?: AgentCountBItem
    minMom?: AgentCountBItem
    maxYoy?: AgentCountBItem
    minYoy?: AgentCountBItem
  }

  const props = withDefaults(defineProps<IProps>(), {})
</script>

<style scoped lang="less">
  .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #6898f7;
  }
</style>
